<template>
  <div style="background: #f4f4f4;">
    <div style="margin: 0 auto; width: 60%; padding: 25px">
      <div class="app-container">
        <h2>考试课程：{{formData.courseName}}</h2>
        <h3>{{ formData.examName }} (满分：{{ formData.fullScore }})</h3>
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
        >
          <h4>单选题({{ formData.examOneScore }}分/题)</h4>
          <div v-for="item in formData.one">
            <span style="display: block">题目：{{item.content}}</span>
            <span style="display: block; margin-top: 5px">A：{{item.options.split(",")[0]}}</span>
            <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
            <span style="display: block; margin-top: 5px">C：{{item.options.split(",")[2]}}</span>
            <span style="display: block; margin-top: 5px">D：{{item.options.split(",")[3]}}</span>
            <span style="display: block; margin-top: 5px; margin-bottom: 25px"> 选项：
              <el-radio v-model="item.sa" label="A" disabled>A</el-radio>
              <el-radio v-model="item.sa" label="B" disabled>B</el-radio>
              <el-radio v-model="item.sa" label="C" disabled>C</el-radio>
              <el-radio v-model="item.sa" label="D" disabled>D</el-radio>
            </span>
            <span style="color: green; margin-bottom: 20px; display: block">正确答案：{{item.answer}}</span>
          </div>

          <h4>多选题({{ formData.examTwoScore }}分/题)</h4>
          <div v-for="item in formData.two">
            <span style="display: block">题目：{{item.content}}</span>
            <span style="display: block; margin-top: 5px">A：{{item.options.split(",")[0]}}</span>
            <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
            <span style="display: block; margin-top: 5px">C：{{item.options.split(",")[2]}}</span>
            <span style="display: block; margin-top: 5px">D：{{item.options.split(",")[3]}}</span>
            <span style="margin-top: 5px; margin-bottom: 25px"> 选项：
               <el-checkbox-group v-model="item.ma" @change="handleCheckedCitiesChange">
                  <el-checkbox label="A" disabled>A</el-checkbox>
                  <el-checkbox label="B" disabled>B</el-checkbox>
                  <el-checkbox label="C" disabled>C</el-checkbox>
                  <el-checkbox label="D" disabled>D</el-checkbox>
                </el-checkbox-group>
            </span>
            <span style="color: green; margin-bottom: 20px;margin-top: 20px; display: block">正确答案：{{item.answer}}</span>
          </div>
          <h4>判断选题({{ formData.examThreeScore }}分/题)</h4>
          <div v-for="item in formData.three">
            <span style="display: block">题目：{{item.content}}</span>
            <span style="display: block; margin-top: 5px">A：{{item.options.split(",")[0]}}</span>
            <span style="display: block; margin-top: 5px">B：{{item.options.split(",")[1]}}</span>
            <span style="display: block; margin-top: 5px; margin-bottom: 25px"> 选项：
              <el-radio v-model="item.sa" label="A" disabled>正确</el-radio>
              <el-radio v-model="item.sa" label="B" disabled>错误</el-radio>
            </span>
            <span style="color: green; margin-bottom: 20px; display: block">正确答案：{{item.answer}}</span>
          </div>
          <el-form-item>
            <el-button style="margin-left: 200px;" type="primary" @click="submitForm()">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import {getObj} from "@/api/student/examstudent";

export default {
  name: "info",
  data() {
    return {
      checkedData: [],
      headers: {
        Authorization: "Bearer " + store.getters.token,
      },
      formData: {
        id: '',
        one: [],
        two: [],
        three: [],
        examOneScore: "",
        examTwoScore: "",
        examThreeScore: "",
        fullScore: "",
        examName: "",
        examId: "",
      },
      rules: {}
    };
  },
  created() {
    this.getExamItem();
  },
  methods: {
    getExamItem() {
      getObj( this.$route.params.id).then((res) => {
        this.formData = JSON.parse(res.data.answer)
      })
    },
    submitForm() {
      window.history.go(-1)
    },
    handleCheckedCitiesChange() {

    }
  },
};
</script>
<style lang="scss">
</style>
